<template>
    <div class="view">
        <nav-bar title="线下门店" color="#fff">
            <div class="back" slot="left" @click="back">
                <i class="iconfont icon-fanhui"></i>
            </div>
        </nav-bar>
        <div class="search-mask" v-if="searchFocus"></div>
        <template v-if="!searchFocus">
            <div class="product-scroll">
                <cube-scroll ref="scroll" :data="storeList"
                             :options="options"
                             @pulling-down="onPullingDown"
                             @pulling-up="onPullingUp">
                    <div class="store-item" v-for="store in storeList">
                        <div class="img-box">
                            <img :src="store.image?store.image.file_path:`${publicPath}/img/temp/storeEntrance.jpg`">
                        </div>
                        <div class="content-box">
                            <div class="name ellipsis">
                                <svg class="svg-icon icon-shangcheng1" aria-hidden="true">
                                    <use xlink:href="#icon-shangcheng1"></use>
                                </svg>
                                {{store.name}}
                            </div>
                            <div class="phone ellipsis">
                                <svg class="svg-icon icon-lianxifangshi" aria-hidden="true">
                                    <use xlink:href="#icon-lianxifangshi"></use>
                                </svg>
                                {{store.phone?store.phone:'暂无联系方式'}}
                            </div>
                            <div class="addr ellipsis">
                                <svg class="svg-icon icon-position" aria-hidden="true">
                                    <use xlink:href="#icon-position"></use>
                                </svg>
                                {{store.address!==''?store.address:'暂无地址'}}
                            </div>
                        </div>
                    </div>
                </cube-scroll>
            </div>
        </template>
    </div>
</template>

<script lang="ts">
    import {Component, Vue, Watch} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";
    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";
    import NavBar from "@/components/aui/NavBar.vue";
    import CommonUnit from "@/unit/CommonUnit";

    @Component({
        components: {
            NavBar
        }
    })
    export default class PhysicalStores extends Scene {
        private publicPath: string = process.env.BASE_URL;
        private cateMaskState: number = 0; //分类面板展开状态
        private loadingType: string = "more"; //加载更多状态
        private filterIndex: number = 0;
        private cateId: number = 0; //已选三级分类id
        private priceOrder: number = 0; //1 价格从低到高 2价格从高到低
        private cateList: any[] = [];
        private storeList: any[] = [];
        private page: number = 1;
        private sortType: string = "all";
        private tempSearchWord: string = "";
        private categoryId: string = "";
        private searchFocus: boolean = false;
        private isLoaded: boolean = false;

        @Watch("$route")
        private onChangeRoute() {
            this.updateQuery();
        }

        private back() {
            this.navigateBack();
        }

        private search() {
            this.categoryId = "";
            this.redirectTo({
                name: "storeList",
                query: {
                    searchWord: this.tempSearchWord,
                    categoryId: ""
                }
            });
        }

        private get options(): any {
            let pullUpLoad: any | boolean = {
                threshold: 50,
                txt: {
                    more: "加载成功",
                    noMore: "没有更多数据惹！"
                }
            };
            if (this.isLoaded && this.storeList.length === 0) {
                (pullUpLoad as boolean) = false;
            }
            return {
                pullDownRefresh: {
                    threshold: 60,
                    stop: 40,
                    txt: "更新成功"
                },
                pullUpLoad
            };
        }

        private onPullingDown(): void {
            this.page = 1;
            this.isLoaded = false;
            this.$nextTick(() => {
                setTimeout(() => {
                    this.getStoreList();
                }, 300);
            });
        }

        private onPullingUp(): void {
            setTimeout(() => {
                this.getStoreList();
            }, 500);
        }

        private mounted() {
            this.page = 1;
            const query = this.$route.query;
            this.categoryId = String(query.categoryId || "");
            this.tempSearchWord = String(query.searchWord || "");
            if (String(query.focus) === "1") {
                (<any> this).$refs.searchInput.focus();
            }
            this.getStoreList();
        }

        private updateQuery() {
            this.page = 1;
            const query = this.$route.query;
            this.categoryId = String(query.categoryId || "");
            this.tempSearchWord = String(query.searchWord || "");
            this.getStoreList();
        }


        private async getStoreList(): Promise<any> {
            const storeListRes = await Http.get(this.api.getExperienceStore, {
                page: this.page,
                size: 10
            },{});
            //this.storeList = storeListRes.data.data;
            if (storeListRes.code === 1) {
                if (this.page === 1) {
                    this.storeList.splice(0, this.storeList.length);
                }
                if (storeListRes.data.data.length > 0) {
                    this.storeList.push(...storeListRes.data.data);
                    this.page++;
                } else {
                    (<any> this).$refs.scroll.forceUpdate(false, true);
                }
            } else {
                this.globalSingleResultToast(storeListRes);
            }
            this.isLoaded = true;
        }

        private toProductDetail(id: string) {
            this.navigateTo({
                name: "productDetail",
                query: {
                    id: id
                }
            });
        }
    }
</script>

<style scoped lang="stylus">
    .view
        background $theme-page-common-background-color;
        height 100vh;
        width 100vw;
        overflow hidden;

        .nav-bar
            background-color $theme-thin-color !important;

        .search-mask
            height 100vh;
            width 100vw;
            background $theme-white-to-gay-background-gradient;
            padding-top calc(44px + var(--safe-area-inset-top))

        .product-scroll
            height 100vh;
            width 100vw;
            background $theme-white-to-gay-background-gradient
            padding-top calc(44px + var(--safe-area-inset-top))

            .store-item
                width 94vw;
                height 250px;
                margin 10px auto;
                border-radius 16px;
                overflow hidden;
                box-shadow 5px 5px 5px rgba(137,137,137,.8);

                .img-box
                    width 94vw;
                    height 160px;
                    img
                        display block;
                        width 94vw;
                        height 160px;
                .content-box
                    width 94vw;
                    height 90px;
                    padding 5px 10px;
                    border-bottom-left-radius 16px;
                    border-bottom-right-radius 16px;
                    //border 1px solid $theme-line-color;
                    //border-top none;
                    background-color #fff;
                    >div
                        height 25px;
                        line-height 25px;
                        svg.icon-shangcheng1
                            font-size 25px;
                        svg.icon-position
                            font-size 24px;
                        svg.icon-lianxifangshi
                            font-size 22px;


    .search-input-wrap
        height 29px;
        text-align center;
        font-size 13px;
        color #333;
        border-radius 2px;
        background rgba(210, 210, 210, .4);
        width 230px;
        margin-top 6px;
        overflow hidden
        line-height 29px !important
        margin-right 50px;
        padding 0 12px;


        .search-input-wrap-input
            width 100%;
            height 29px;
            background rgba(255, 255, 255, 0)
            margin-top 0;
            font-size 12px;
            color #333;

            &::-webkit-input-placeholder {
                color: #999;
            }

    .search-input-wrap-blur
        width 280px !important
        margin-right 0 !important
        line-height 29px


    .right-btn
        background $theme-common-color;
        color #fff;
        height 29px;
        width 60px;
        display flex;
        justify-content center;
        align-items center;
        margin-top 6px;
        border-radius 2px;
        position absolute
        z-index 50
        right 12px

        &.right-cancel
            background $theme-auxiliary-color


</style>
